<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。-->
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/hello">测试一 基础和判断</router-link>  <br/>
    <router-link to="/Xunhuan">测试二  循环</router-link>     <br/>
    <router-link to="/jisuan">测试三 计算属性</router-link>    <br/>
    <router-link to="/watch">测试四  watch</router-link>        <br/>
    <router-link to="/bind">测试五  class 与 style绑定</router-link>   <br/>
    <router-link to="/eventDemo">测试五  事件处理器</router-link>    <br/>
    <router-link to="/form">测试六   表单</router-link> <br/>
    <router-link to="/form">测试七   组件</router-link> <br/>
    <router-link to="/diy">测试八 父子组件</router-link> <br/>
    <router-link to="/axiosDemo">测试九 axios</router-link> <br/>
    <hr>
     <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>
  </div>
</template>
/**
  router-view  是 Vue Router 提供的一个功能性组件，它的核心作用是作为一个占位符 (Placeholder) 或出口 (Outlet)，用于渲染当前 URL 所匹配到的组件。
 你可以把它想象成一个 **“动态内容显示框”或者电视的“屏幕”**。
 1. 核心作用
  router-view  的唯一作用就是：根据当前浏览器地址栏中的 URL，自动渲染与之匹配的路由组件。
 当用户点击  router-link  导航到一个新的 URL 时：
 Vue Router 会检测到 URL 的变化。
 它会查找 routes 配置数组，找到与新 URL 匹配的路由规则。
 然后，它会获取该路由规则对应的组件（component）。
 最后，它将这个组件渲染到  router-view  所在的位置。
 **/


<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
